<template>
  <div class="formBox">
    <div>
      <el-row :gutter="10">
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <el-select
            v-model="choiceSearchData"
            placeholder="请选择医废收集公司"
            class="move"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <el-button @click="deleteData" class="movuLeft" type="danger"
            >重置</el-button
          >
        </el-col>
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div>
            <el-date-picker
              v-model="value2"
              type="month"
              placeholder="选择月"
              ref="myDay"
              class="move"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getFormData"
            class="move"
            >搜索</el-button
          >
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <el-button type="primary" class="move" @click="goExport">
            导出
            <i class="el-icon-upload el-icon--right"></i>
          </el-button>
        </el-col>
      </el-row>

      <!-- <el-row :gutter="10">
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4"></el-col>
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" class="move"></el-col>
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3"></el-col>

        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" class="move"></el-col>
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" class="move">
          <el-button type="primary" icon="el-icon-search" @click="getFormData">导出</el-button>

          <a @click="goExport">导出</a>
        </el-col>
      </el-row>-->
    </div>
    <el-table
      :data="tableData"
      label-width="auto"
      fit
      size="medium"
      v-if="isShow == true"
    >
      <el-table-column
        label="科室"
        width="200px"
        prop="depName"
      ></el-table-column>
      <el-table-column
        label="医废类别"
        width="200px"
        prop="categoryName"
      ></el-table-column>
    </el-table>

    <el-table
      fit
      :data="tableData"
      label-width="auto"
      size="medium"
      v-if="isShow == false"
    >
      <el-table-column
        label="科室"
        width="150px"
        prop="depName"
      ></el-table-column>
      <el-table-column
        label="医废类别"
        width="150px"
        prop="categoryName"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '1'"
        width="100px"
        prop="day1"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '2'"
        width="100px"
        prop="day2"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '3'"
        width="100px"
        prop="day3"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '4'"
        width="100px"
        prop="day4"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '5'"
        width="100px"
        prop="day5"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '6'"
        width="100px"
        prop="day6"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '7'"
        width="100px"
        prop="day7"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '8'"
        width="100px"
        prop="day8"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '9'"
        width="100px"
        prop="day9"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '10'"
        width="100px"
        prop="day10"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '11'"
        width="100px"
        prop="day11"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '12'"
        width="100px"
        prop="day12"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '13'"
        width="100px"
        prop="day13"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '14'"
        width="100px"
        prop="day14"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '15'"
        width="100px"
        prop="day15"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '16'"
        width="100px"
        prop="day16"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '17'"
        width="100px"
        prop="day17"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '18'"
        width="100px"
        prop="day18"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '19'"
        width="100px"
        prop="day19"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '20'"
        width="100px"
        prop="day20"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '21'"
        width="100px"
        prop="day21"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '22'"
        width="100px"
        prop="day22"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '23'"
        width="100px"
        prop="day23"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '24'"
        width="100px"
        prop="day24"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '25'"
        width="100px"
        prop="day25"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '26'"
        width="100px"
        prop="day26"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '27'"
        width="100px"
        prop="day27"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '28'"
        width="100px"
        prop="day28"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '29'"
        width="100px"
        prop="day29"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '30'"
        width="100px"
        prop="day30"
      ></el-table-column>
      <el-table-column
        :label="this.monthData + '31'"
        width="100px"
        prop="day31"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  companyStatementsData,
  getCompanyStatementsData,
  exportTable,
} from "../network/api.js";
export default {
  name: "hmm",
  components: {},
  props: {},
  data() {
    //这里存数据
    return {
      isShow: true,
      // 月份
      value2: "",
      // 公司选择数据
      options1: [],
      // 公司选择数据
      choiceSearchData: "",
      // 科室数据
      departmentData: [],
      // 类别数据
      categoryData: [],
      // 表格数据
      tableData: [],
      // 月份数据
      monthData: "",
      // 一个月多少天
      monthDataDay: "",
      // 天数从一开始循环的数据
      dayData: [],
      ChuanmonthData: "",
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {
    get() {
      console.log();
      console.log(this.categoryData);
    },
    // 获取报表数据
    getFormData() {
      if (this.choiceSearchData == "") {
        return this.$message("请选择医废收集公司");
        // else if (this.choiceSearchData == '') {
        //   return alert('123')
        // }
      }
      this.isShow = false;
      console.log(this.value2, this.$refs.myDay.displayValue, 21, this.value2);
      this.ChuanmonthData = this.$refs.myDay.displayValue;
      // 截取月份
      this.monthData = this.$refs.myDay.displayValue.slice(5);
      console.log(this.monthData);
      if (this.monthData / 10 < 1) {
        this.monthData = this.monthData.slice(1) + ".";
        console.log(this.monthData, 11);
        // this.monthDataDay = new Date(
        //   this.$refs.myDay.displayValue.slice(0, 4),
        //   this.monthData,
        //   0
        // ).getDate()
        // console.log(this.monthDataDay, 22)
        // if (this.monthData != null) {
        //   for (let i = this.monthDataDay; i >= 1; i--) {
        //     console.log(i)
        //     this.dayData.unshift(i)
        //   }
        // }
      } else {
        this.monthData = this.monthData + ".";
        // this.monthDataDay = new Date(
        //   this.$refs.myDay.displayValue.slice(0, 4),
        //   this.monthData,
        //   0
        // ).getDate()
      }
      console.log(this.monthData, this.choiceSearchData);
      console.log(this.ChuanmonthData);
      getCompanyStatementsData({
        companyName: this.choiceSearchData,
        date: this.ChuanmonthData,
      })
        .then((res) => {
          console.log(res.result);
          this.tableData = res.result;
          for (let i = 0; i <= res.result.length; i++) {
            this.departmentData.push(res.result[i].depName);
            this.categoryData.push(res.result[i].categoryName);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goExport() {
      console.log(this.ChuanmonthData);
      exportTable({
        companyName: this.choiceSearchData,
        date: this.$refs.myDay.displayValue,
      })
        .then((res) => {
          // console.log(res)
          window.open(
            `${
              "http://39.104.74.183:21028/Home/ExportExcel?companyName=" +
              this.choiceSearchData +
              `&date=` +
              this.$refs.myDay.displayValue
            }`
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 重置按钮
    deleteData() {
      // console.log(124)
      this.choiceSearchData = "";
      this.value2 = "";
      // this.$refs.myDay.displayValue = []
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    companyStatementsData({})
      .then((res) => {
        // console.log(res)
        this.options1 = res.result;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="less" scoped>
.displayInline {
  display: inline-block;
  margin-left: 1.25rem;
  margin-top: 0.625rem;
}
.moveLeft {
  margin-left: 1.25rem;
  margin-top: 0.625rem;
  width: 18.75rem;
}
.move {
  margin-left: 1.875rem;
  margin-top: 0.625rem;
}
.turnLeft {
  margin-left: 6.25rem;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.movuLeft {
  display: inline-block;
  margin-left: 1.875rem;
  margin-top: 0.625rem;
}

.el-select {
  display: inline-block;
  position: relative;
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>


